<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>悬停时变大</title>
	<style type="text/css">
		 body,ul,li{ 
		 	margin:0; 
		 	padding:0; 
		 	list-style:none
		 }
		 #box{ 
		 	padding:10px;
		 }
		 #box li{ 
		 	float:left; 
		 	position:relative; 
		 	margin:2px; 
		 	position:relative; 
		 	width:100px; 
		 	height:150px;
		 }
		 #box li a{ 
		 	width:100%; 
		 	height:100%; 
		 	background:#04CAFC; 
		 	position:absolute; 
		 	top:0; 
		 	left:0; 
		 	display:block; 
		 	transition:all 400ms ease; 
		 	-moz-transition:all 400ms ease; 
		 	-webkit-transition:all 400ms ease; 
		 	-o-transition:all 400ms ease;
		 }
		 #box li a:hover{ 
		 	background:#CC02FC; 
		 	top:-10px; 
		 	left:-10px; 
		 	width:120px; 
		 	height:170px; 
		 	z-index:9999999;
		 }
	</style>
</head>
<body>
    <div id="box">
	  <ul>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	   <li><a></a></li>
	  </ul>
	 </div>
</body>
</html>